import React, { memo } from "react";
import PropTypes from "prop-types"

import SongCover from "@/components/song-cover";
import ThemeHeaderRCM from "@/components/theme-header-rcm";
import { HotRecommendWrapper } from "./style";

const HotRecommend = memo((props) => {
  const { hotRecommends } = props;
  return (
    <HotRecommendWrapper>
      <ThemeHeaderRCM
        title="热门推荐"
        keyword={["华语", "流行", "摇滚", "民谣", "电子"]}
      />
      <div className="songList">
        {
          hotRecommends.map((item,index)=> {
            return (
              <SongCover item={item} key={item.id} />
            )
          })
        }
      </div>
    </HotRecommendWrapper>
  );
});

HotRecommend.propTypes = {
  hotRecommends: PropTypes.array
}

HotRecommend.defaultProps = {
  hotRecommends: []
}

export default HotRecommend;
